<template>
    <div class="zb-input" :class="{'before-line': beforeLine, 'after-line': afterLine,}">
        <div v-if="title" class="title">{{title}}</div>
        <input v-if="type === 'text'"
            v-model="currentValue"
            class="input"
            :class="inputClass"
            :placeholder="placeholder"
            type="text"
            maxlength="10" />
        <input v-if="type === 'number'"
            v-model="currentValue"
            class="input"
            :class="inputClass"
            :placeholder="placeholder"
            type="number"
            maxlength="18" />
    </div>
</template>

<script>
export default {
    name: 'ZbInput',
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        title: {
            type: String,
        },
        value: {
            type: String,
            required: true,
        },
        inputClass: {
            type: [ Array, Object ],
        },
        type: {
            type: String,
            default: 'text',
        },
        placeholder: {
            type: String,
            default: '必填',
        },
        beforeLine: {
            type: Boolean,
            default: false,
        },
        afterLine: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            currentValue: null,
        };
    },
    watch: {
        value(val) {
            this.currentValue = val;
        },
        currentValue(val) {
            this.$emit('change', val);
        },
    },
    created() {
        this.currentValue = this.value;
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.zb-input {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 36rpx;
    .title {
        .text-normal();
        margin-right: 10px;
    }
    .input {
        flex: 1;
        .text-normal();
        text-align: left;
        &.right {
            text-align: right;
        }
    }
}
</style>
